<template>
  <div class="help-msp-getmoney">
    <HeaderTop title="Help"></HeaderTop>
    <div class="title">The Control Number start with “MSP”</div>
    <div class="main">
      <p class="t">Step1.</p>
      <p>Fill-up the ML KwartaPalada Form (Receiver, sender, KPTN/Reference #, amount)</p>
      <img src="~@/assets/imgs/help/getmoney/msp_pic1.jpg" class="mgt-20" />
      <p class="t">Step2.</p>
      <p>Fill-up the Know Your Customer (Customer Identification Form) (Branches may not require it. We got feedback from users that it is not required to be filled in.); </p>
      <p class="t">Step3.</p>
      <p>Offer KYC and ML KwartaPalada Form, Present 1 Claear Valid ID (valid period, name, clear picture)the workers ; </p>
      <p class="t">Step4.</p>
      <p>Receiver in the ML KwartaPalada Payout Form to sign and keep the receipt, payout complete.</p>
      <p class="t"></p>
      <p>About Valid IDS you can reference to below of url,</p>
      <p @click="goPage('/help/msp/getmoneyMl')" class="mgt-20 link">M.Lhuillier support certificate list and description</p>
      <p @click="goPage('/help/msp/getmoneyRd')" class="mgt-20 link">Rd Pawnshop support certificate list and limit description</p>
      <p class="mgt-20">If you have problem in claim money,please call the Customer Service:{{ customer.tel }}</p>
    </div>
  </div>
</template>

<script>
  import HeaderTop from '@/components/header-top'
  export default {
    name: 'help-msp-getmoney',
    components: {
      HeaderTop
    },
    data () {
      return {
        customer: {
          tel: '',
        }
      };
    },
    methods: {
      goPage(url) {
        this.$router.push(url)
      },
      /**
       * 获取客服电话
       */
      getCustomerPhone() {
        this.$api.getServiceTel({}).then(res => {
          const {status, error, data} = res;
          if ('1' === status && ('00000000' === error || '0000' === error)) {
            this.customer = data[0];
          }
        })
      }
    },
    created() {
      this.getCustomerPhone();
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@/assets/scss/function';

  [data-page=help-msp-getmoney] {
    body {
      background: #f8f8f8;
    }
    .help-msp-getmoney {
      padding:180px 0 30px 0;
      .title {
        font-size:32px;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:48px;
        padding:0 30px;
        margin:0 0 60px 0;
        text-align: center;
      }
      .main {
        width:690px;
        margin:0 auto;
        background:#FFF;
        border-radius:20px;
        padding:30px 30px 50px 30px;
        font-size:28px;
        color:#222222;
        .t {
          color:#DE4B5D;
          font-weight: bold;
          margin-top:60px;
        }
        .t:first-child {
          margin-top:0px;
        }
        .mgt-20 {
          margin-top:20px;
        }
        .link {
          color:#003CB8;
          text-decoration: underline;
        }
      }
    }
  }
</style>
